<template>
    <div class="my-tag">
        <input v-focus v-if="isShow" @keyup.enter="editTag" @blur="isShow = fasle" class="input" :value="value"
            type="text" placeholder="输入标签" />
        <div v-else class="text" @dblclick="isShow = true">
            {{ value }}
        </div>
    </div>
</template>

<script>
export default {
    name: 'TagComp',
    data() {
        return {
            isShow: false
        }
    },
    props: {
        value: String
    },
    methods: {
        editTag(e) {
            // 判空
            if (e.target.value.trim() === '') {
                alert('请输入内容')
                return
            }
            this.$emit('input', e.target.value)
            this.isShow = false
        }
    }

}
</script>

<style scoped lang='less'></style>